<template>
  <div class="search-container">
    <router-view></router-view>
    <van-nav-bar
      title="搜索中心"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/home')"
    />
     <van-search
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
        v-model.trim="value"
        @input="getSuggestion"
        @search="onSearch(value)"
      >
        <template #action>
          <div @click="onSearch(value)">搜索</div>
        </template>
      </van-search>
    <!-- 联想建议 -->
    <van-cell-group v-if="value">
      <van-cell v-for="(item,index) in showSugList" :key="index" @click="sugSearch(index)" icon="search">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
      </van-cell>
      <van-cell @click="onSearch(item)" v-for="(item,index) in historyList" :key="index" :title="item">
        <!-- 这里他妈的有个冒泡行为 -->
        <van-icon class="close" @click.stop="delHistory(index)" name="close"/>
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqGetSuggestion } from '@/api/search'
import { setHistroyList, getHistroyList } from '@/utils/storage'
export default {
  data () {
    return {
      // 搜索关键字
      value: '',
      // 搜索建议列表
      sugList: [],
      // 历史搜索记录
      historyList: getHistroyList() || [],
      timeId: {}
    }
  },
  computed: {
    // 语法高亮处理
    showSugList () {
      // 先判断sugList列表里有没有值，不然别做筛选显示
      let arr = []
      console.log(this.sugList)
      if (this.sugList[0]) {
        // 创建正则规则，拿当前输入框里面的值进行筛选高亮，gi是全局跟不分大小写的意思
        const regExp = new RegExp(this.value, 'gi')
        // 返回一个处理过的数组，这个数组里放处理好的html结构实现高亮
        arr = this.sugList.map(item => {
          console.log(item)
          // 使用正则校验，替换掉原文本中需要高亮的部分并返回
          return item.replace(regExp, (value) => {
          // 因为要把原来的值放入span标签里实现高亮，所以这里用函数返回值的方式传参回去
            return `<span style="color: red;">${value}</span>`
          })
        })
      }
      return arr
    }
  },
  methods: {
    // 点击搜索并获取搜索栏内容
    onSearch (keywords) {
      if (keywords === '') return console.log('没有值')
      // 把搜索记录存放到历史搜索记录里
      // 要先看看以前有没有搜过，放在请求前面应该没问题，因为无论成功失败都要保存历史记录
      if (this.historyList.findIndex(item => item === keywords) === -1) {
        this.historyList.unshift(keywords)
        // 存进本地
        setHistroyList(this.historyList)
      }
      console.log('123', keywords)
      this.$router.push({ path: '/searchResult', query: { keywords } })
    },
    // 获取搜索建议
    getSuggestion () {
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        if (this.value === '') return
        // 切换显示
        const { data } = await reqGetSuggestion(this.value)
        // 拿到推荐列表并渲染进去
        this.sugList = data.data.options
        console.log(this.sugList, '拿到新的列表')
      }, 300)
    },
    // 点击搜索建议里的数据，，不能直接传item，要去原数组里拿数据传
    sugSearch (index) {
      this.onSearch(this.sugList[index])
    },
    delHistory (index) {
      console.log('删除触发', index, this.historyList)
      // this.historyList = this.historyList.filter(item => item !== value)
      // console.log(this.historyList)
      this.historyList.splice(index, 1)
      setHistroyList(this.historyList)
    }
  }
}
</script>

<style lang="scss" scoped>
.close{
  font-size: 20px;
}
</style>
